<template>
  <el-container>
    <el-header height="30%">
      <div style="border-radius: 4px;" class="page-container">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="基本信息" name="activeName">
            <!-- <el-form :inline="true" :model="tableData" ref="tableData" > -->
            <div style="height:30%;width:90%">
              <!-- <el-row :gutter="24">
                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>采购单号</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left">
                    <el-input size="mini" readonly="readonly" v-model="form.code" disabled></el-input>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>操作人员</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left">
                    <el-input size="mini" readonly="readonly" v-model="form.creater" disabled></el-input>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>采购员</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left">
                    <el-input size="mini" readonly="readonly" v-model="form.purchaseUserName" disabled></el-input>
                  </div>
                </el-col>
              </el-row>

              <el-row :gutter="24">
                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>来源类型</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left;width:100%">
                    <el-select placeholder="请选择" v-model="form.fromType" size="mini" style="width:200px" disabled>
                      <el-option label="手动录入" :value="0"></el-option>
                      <el-option label="直通转入" :value="1"></el-option>
                      <el-option label="直送转入" :value="2" ></el-option>
                      <el-option label="自动补货" :value="2"></el-option>
                      <el-option label="无采购单收货" :value="2"></el-option>
                      <el-option label="内部销售订单" :value="2"></el-option>
                      <el-option label="要货补货" :value="2"></el-option>
                      <el-option label="采购计划" :value="2"></el-option>
                    </el-select>
                  </div>
                </el-col>

                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>创建日期</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left">
                    <el-input size="mini" readonly="readonly" v-model="form.createTime" disabled></el-input>
                  </div>
                </el-col>

                <el-col :span="4">
                  <div class="grid-content" style="text-align:right;">
                    <label>供应商</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left;width:100%">
                    <el-input size="mini" readonly="readonly" v-model="form.supplierName" @focus="showSupplier" disabled></el-input>
                  </div>
                </el-col>
              </el-row>-->

              <el-row :gutter="24">
                <!-- <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>发货联系人</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left;width:100%">
                    <el-input size="mini" @focus="showContact" disabled></el-input >
                  </div>
                </el-col>-->

                <!-- <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>交易币别</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left;width:100%">
                    <el-select placeholder="请选择" size="mini" style="width:200px" disabled>
                      <el-option label="CNY" :value="0"></el-option>
                      <el-option label="AUD" :value="1"></el-option>
                      <el-option label="USD" :value="2"></el-option>
                      <el-option label="GBP" :value="2"></el-option>
                    </el-select>
                  </div>
                </el-col>-->

                <!-- <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>采购日期</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left">
                    <el-input size="mini" readonly="readonly" v-model="form.startTime" disabled></el-input>
                  </div>
                </el-col>

                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>预计到货日期</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left">
                    <el-input size="mini" readonly="readonly" v-model="form.endTime" disabled></el-input>
                  </div>
                </el-col>

                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>收货商家</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left;">
                    <el-select
                      size="mini"
                      style="width:200px"
                      disabled="disabled"
                      v-model="form.merchantName"
                    ></el-select>
                  </div>
                </el-col>-->
              </el-row>

              <el-row :gutter="24">
                <!-- <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>收货店铺</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left;width:100%">
                    <el-input
                      size="mini"
                      readonly="readonly"
                      v-model="form.shopName"
                      disabled
                      @focus="showStore"
                    ></el-input>
                  </div>
                </el-col>

                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>收货仓库</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left;width:100%">
                    <el-input
                      size="mini"
                      readonly="readonly"
                      @focus="showWarehouse"
                      v-model="form.storeName"
                      disabled
                    ></el-input>
                  </div>
                </el-col>

                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>状态</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left;width:100%">
                    <el-select
                      placeholder="请选择"
                      v-model="form.status"
                      size="mini"
                      style="width:200px"
                      disabled
                    >
                      <el-option label="待提交" :value="0"></el-option>
                      <el-option label="待审核" :value="1"></el-option>
                      <el-option label="已审核" :value="2"></el-option>
                      <el-option label="审核拒绝" :value="3"></el-option>
                      <el-option label="已发货" :value="4"></el-option>
                      <el-option label="已结案" :value="5"></el-option>
                      <el-option label="已过期" :value="6"></el-option>
                      <el-option label="已作废" :value="7"></el-option>
                    </el-select>
                  </div>
                </el-col>
              </el-row>

              <el-row :gutter="24">
                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>收货方式</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left;width:100%">
                    <el-select placeholder="请选择" size="mini" style="width:200px" disabled>
                      <el-option label="接受-入库" :value="0"></el-option>
                      <el-option label="直接-入库" :value="1"></el-option>
                      <el-option label="接受-检验-入库" :value="2"></el-option>
                    </el-select>
                  </div>
                </el-col>

                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>配送方式</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left;width:100%">
                    <el-select placeholder="请选择" size="mini" style="width:200px" disabled>
                      <el-option label="快速物流" :value="0"></el-option>
                    </el-select>
                  </div>
                </el-col>-->
              </el-row>

              <el-row :gutter="24">
                <!-- <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>采购履行状态</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left;width:100%">
                    <el-input size="mini" readonly="readonly" disabled="disabled" value="未履行"></el-input>
                  </div>
                </el-col>

                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>联系人名称</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div
                    class="grid-content"
                    style="text-align:left;width:100%"
                    placeholder="请输入联系人名称"
                  >
                    <el-input size="mini" disabled></el-input>
                  </div>
                </el-col>-->
              </el-row>

              <el-row :gutter="24">
                <!-- <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>备注</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left">
                    <el-input size="mini" type="textarea" disabled style="width:200px"></el-input>
                  </div>
                </el-col>-->
              </el-row>

              <!-- <el-row :gutter="24">
                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>实际收货数量</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left">
                    <el-input v-model="recive" size="mini" style="width:200px" :disabled="id!=1"></el-input>
                  </div>
                </el-col>

                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>实际发货数量</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left">
                    <el-input v-model="send" size="mini" style="width:200px" :disabled="id!=2"></el-input>
                  </div>
                </el-col>

                <el-col :span="4">
                  <div class="grid-content" style="text-align:right">
                    <label>附件</label>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content" style="text-align:left">
                    <el-upload
                      class="upload-demo"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      multiple
                      :limit="3"
                    >
                      <el-button size="small" type="primary">点击上传</el-button>
                      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                  </div>
                </el-col>
              </el-row>-->
            </div>
            <!-- </el-form> -->
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-header>
    <el-main>
      <div>
        <el-tabs>
          <el-tab-pane label="商品明细">
            <div style="text-align:left">
              <kt-button label="添加商品" type="primary" @click="choseOrder" />
              <kt-button label="添加供应商" type="primary" @click="choseSupplier" />
            </div>
            <div>
              <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="productCode" label="商品编码" width="180"></el-table-column>
                <el-table-column prop="productName" label="商品名称" width="180"></el-table-column>
                <el-table-column prop="productUnit" label="商品计量单位" width="180"></el-table-column>
                <el-table-column prop="productBarNo" label="商品条码" width="180"></el-table-column>
                <el-table-column prop="purchaseNum" label="本次采数量" width="180">
                  <template slot-scope="scope">
                    <el-input :disabled="id==1" size="mini" v-model="scope.row.purchaseNum"></el-input>
                  </template>
                </el-table-column>
                <!-- <el-table-column prop="realDeliveryNum" label="发货数量" width="180">
                  <template slot-scope="scope">
                    <el-input
                      :disabled="id==1"
                      size="mini"
                      v-model="scope.row.realDeliveryNum"
                      @change="change(scope.$index, scope.row)"
                    ></el-input>
                  </template>
                </el-table-column>-->
                <el-table-column prop="realRecievedNum" label="收货数量" width="180">
                  <template slot-scope="scope">
                    <el-input
                      :disabled="id==2"
                      size="mini"
                      v-model="scope.row.realRecievedNum"
                      @change="change(scope.$index,scope.row)"
                    ></el-input>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!-- <div style="margin-left:70%">
              <el-row :gutter="14">
                <el-col :span="7">
                  <div class="grid-content" style="text-align:right">
                    <label>合计平品项数</label>
                  </div>
                </el-col>
                <el-col :span="7">
                  <div class="grid-content" style="text-align:right;width:100%">
                    <span>23</span>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="14">
                <el-col :span="7">
                  <div class="grid-content" style="text-align:right">
                    <label>合计含税金额</label>
                  </div>
                </el-col>
                <el-col :span="7">
                  <div class="grid-content" style="text-align:right;width:100%">
                    <span>5952.00</span>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="14">
                <el-col :span="7">
                  <div class="grid-content" style="text-align:right">
                    <label>合计未税金额</label>
                  </div>
                </el-col>
                <el-col :span="7">
                  <div class="grid-content" style="text-align:right;width:100%">
                    <span>451.00</span>
                  </div>
                </el-col>
              </el-row>
            </div>-->
          </el-tab-pane>
          <el-tab-pane label="操作日志">
            <div>
              <el-table :data="tableLog" border style="width: 100%">
                <el-table-column prop="operatingid" label="操作用户ID"></el-table-column>
                <el-table-column prop="operator" label="操作人"></el-table-column>
                <el-table-column prop="operating_time" label="操作时间"></el-table-column>
                <el-table-column prop="operating" label="操作"></el-table-column>
                <el-table-column prop="remark" label="备注"></el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-main>
    <el-row style="text-align:center">
      <!-- <kt-button label="保存" type="primary" @click="save" /> -->
      <kt-button label="提交" type="primary" @click="saves" />
    </el-row>

    <!-- 选择店铺 -->
    <el-dialog
      title="选择店铺"
      :visible.sync="showModel"
      width="45%"
      height="100%"
      label-width="80px"
      label-position="right"
    >
      <el-form style="text-align:left" label-width="80px" label-position="right">
        <el-row>
          <div style="text-align:center">
            <el-form-item label="店铺名称" style="float:left;margin-left:90px">
              <el-input auto-complete="off" width="20%"></el-input>
            </el-form-item>

            <el-form-item label="店铺编码" style="float:left;margin-left:90px">
              <el-input auto-complete="off" width="20%"></el-input>
            </el-form-item>
          </div>
        </el-row>

        <div style="text-align:center">
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="findPage(null)"
            />
            <kt-button label="重置" type="primary" />
          </el-form-item>
        </div>

        <el-table :data="shopTable" border style="width: 100%" :visible.sync="showTable">
          <el-table-column prop="checks" type="selection"></el-table-column>
          <el-table-column prop="name" label="商家名称" width="280"></el-table-column>
          <el-table-column prop="number" label="店铺编码" width="280"></el-table-column>
          <el-table-column prop="shopname" label="店铺名称"></el-table-column>
          <el-table-column prop="type" label="店铺类型"></el-table-column>
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:right">
        <el-button @click="cancels">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 发货联系人 -->
    <!-- <el-dialog
      title="请输入联系人"
      :visible.sync="showContactModel"
      width="45%"
      height="100%"
      label-width="80px"
      label-position="right"
    >
      <el-table :data="ContactTable" border style="width: 100%" :visible.sync="showContactTable">
        <el-table-column prop="checks" type="selection" label="选择"></el-table-column>
        <el-table-column prop="name" label="供应商编码" width="280"></el-table-column>
        <el-table-column prop="number" label="联系人职位" width="280"></el-table-column>
        <el-table-column prop="shopname" label="联系人手机"></el-table-column>
        <el-table-column prop="type" label="固定电话"></el-table-column>
        <el-table-column prop="number" label="传真号码" width="280"></el-table-column>
        <el-table-column prop="shopname" label="QQ"></el-table-column>
        <el-table-column prop="type" label="微信"></el-table-column>
        <el-table-column prop="number" label="联系邮箱" width="280"></el-table-column>
        <el-table-column prop="number" label="供应商名称" width="280"></el-table-column>
        <el-table-column prop="shopname" label="联系人名称"></el-table-column>
        <el-table-column prop="type" label="性别"></el-table-column>
        <el-table-column prop="shopname" label="省"></el-table-column>
        <el-table-column prop="type" label="市"></el-table-column>
        <el-table-column prop="number" label="区/县" width="280"></el-table-column>
        <el-table-column prop="shopname" label="详细地址"></el-table-column>
        <el-table-column prop="type" label="主要联系人"></el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer" style="text-align:right">
        <el-button @click="clearContact">取 消</el-button>
      </div>
    </el-dialog>-->

    <!-- 选择供应商 -->

    <el-dialog
      title="选择供应商"
      :visible.sync="showSupplierModel"
      width="45%"
      height="100%"
      label-width="80px"
      label-position="right"
    >
      <el-form style="text-align:left" label-width="80px" label-position="right">
        <el-row>
          <div style="text-align:center">
            <el-form-item label="供应商编码" style="float:left;margin-left:90px">
              <el-input auto-complete="off" width="20%"></el-input>
            </el-form-item>

            <el-form-item label="供应商名称" style="float:left;margin-left:90px">
              <el-input auto-complete="off" width="20%"></el-input>
            </el-form-item>
          </div>
        </el-row>

        <div style="text-align:center">
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="findPage(null)"
            />
            <kt-button label="重置" type="primary" />
          </el-form-item>
        </div>

        <el-table
          :data="supplierTable"
          border
          style="width: 100%"
          :visible.sync="showSupplierTable"
        >
          <el-table-column prop="checks" type="selection"></el-table-column>
          <el-table-column prop="number" label="供应商编码"></el-table-column>
          <el-table-column prop="name" label="供应商名称"></el-table-column>
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:right">
        <el-button @click="cancelSupplier">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 选择商品 -->
    <div style="overflow-x:visible">
      <el-dialog
        title="选择商品"
        :visible.sync="choseModel"
        width="45%"
        height="100%"
        label-width="80px"
        label-position="right"
      >
        <el-table
          :data="this.shopFilters.res.rows"
          border
          height="350"
          style="width: 100%"
          @selection-change="handleSelectionChangeShop"
        >
          <el-table-column prop="checkss" type="selection"></el-table-column>
          <el-table-column prop="chineseName" label="商品名称" width="180"></el-table-column>
          <el-table-column prop="merchantName" label="商家名称" width="180"></el-table-column>
          <el-table-column prop="storeName" label="店铺名称" width="180"></el-table-column>
          <el-table-column prop="code" label="商品编码" width="180"></el-table-column>
          <!-- <el-table-column prop="productVolume" label="体积(cm^3)" width="180"></el-table-column>
                <el-table-column prop="shelfLifeDays" label="保质期天数" width="180"></el-table-column>
          <el-table-column prop="returnDays" label="包退天数" width="180"></el-table-column>-->
          <!-- <el-table-column prop="thirdProductCode" label="第三方商品编码" width="180"></el-table-column> -->
          <el-table-column prop="type" label="商品类型" width="180"></el-table-column>
          <!-- <el-table-column prop="artNo" label="货号" width="180"></el-table-column> -->
          <!-- <el-table-column prop="freightTemplateId" label="运费模板id" width="180"></el-table-column> -->
          <!-- <el-table-column prop="status" label="审核状态" width="180"></el-table-column> -->
          <!-- <el-table-column prop="saleCalcUnitId" label="销售计量单位主键id" width="180"></el-table-column> -->
          <el-table-column prop="canSale" label="上下架状态" width="180"></el-table-column>
          <!-- <el-table-column prop="dataType" label="商品数据类型" width="180"></el-table-column>
          <el-table-column prop="barCode" label="商品条形码" width="180"></el-table-column>-->
        </el-table>
        <div slot="footer" class="dialog-footer" style="text-align:right">
          <el-button @click="addOrder">确定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 选择供应商 -->

    <el-dialog
      title="供应商"
      :visible.sync="showSupplierModel"
      width="45%"
      height="100%"
      label-width="80px"
      label-position="right"
    >
      <el-form style="text-align:left" label-width="80px" label-position="right">
        <!-- <el-row>
          <div style="text-align:center">
            <el-form-item label="供应商编码" style="float:left;margin-left:90px">
              <el-input auto-complete="off" width="20%"></el-input>
            </el-form-item>

            <el-form-item label="供应商名称" style="float:left;margin-left:90px">
              <el-input auto-complete="off" width="20%"></el-input>
            </el-form-item>
          </div>
        </el-row>-->

        <!-- <div style="text-align:center">
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="findPage(null)"
            />
            <kt-button label="重置" type="primary" />
          </el-form-item>
        </div>-->

        <el-table :data="shopWarehouse" border style="width: 100%" :visible.sync="showTable1">
          <el-table-column prop="checks" type="selection"></el-table-column>
          <el-table-column prop="number" label="供应商编码" width="340"></el-table-column>
          <el-table-column prop="name" label="供应商名称"></el-table-column>
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:right">
        <el-button @click="addSupiler">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>
<script>
import CyTable from "@/views/Core/CyTable";
import KtButton from "@/views/Core/KtButton";
export default {
  components: {
    CyTable,
    KtButton
  },
  data() {
    return {
      order:{},
      pageRequest: { pageNum: 1, pageSize: 10 },
      queryFiteris: {},
      shopFilters: {
        res: {
          total: 1,
          code: "0000",
          rows: [{}]
        }
      },
      multipleSelectionShop: [],
      proTables: [],
      filter: { contractCode: null },
      recive: 0,
      send: 0,
      id: 1,
      //联系人
      showContactModel: false,
      showContactTable: false,
      showSupplierModel: false,
      showSupplierTable: false,
      choseModel: false,
      choseTable: false,
      showSupplierModel: false,
      showSupplierTable: false,
      showModel: false,
      showTable: false,
      showModel1: false,
      showTable1: false,
      activeName: "activeName",
      contractCode: null,
      arr: {},
      editarr: [],
      editsarr: [],
      //联系人
      contactTable: [],
      //收货单
      choseTabled: [
        {
          order: "A102315"
        }
      ],
      tableLog: [
        {
          operatingid: "1909160000172983",
          operator: "merchant",
          operating_time: "2019-10-31 22:55:56	",
          operating: "收货单入库	",
          remark: ""
        },
        {
          operatingid: "1909160000172983",
          operator: "merchant",
          operating_time: "2019-10-31 22:00:02		",
          operating: "确认收货单",
          remark: ""
        },
        {
          operatingid: "1909160000172983",
          operator: "merchant",
          operating_time: "2019-10-31 21:59:57		",
          operating: "更新收货单		",
          remark: ""
        },
        {
          operatingid: "1909160000172983",
          operator: "merchant",
          operating_time: "2019-10-31 21:59:52	",
          operating: "创建收货单		",
          remark: ""
        }
      ],
      tableData: [
        //   {
        //     productCode: "A1212",
        //     productName:'勿拍',
        //     mpBarcode:'件',
        //     mpMeasuret:'A456465165',
        //     shoptype:'手机',
        //     shopBrand:'华为',
        //     mpMeasureUnit:'件',
        //     unregularnums:10000,
        //     send:0,
        //     recive:0,
        //     realDeliveryNum:0,
        //     realRecievedNum:0,
        // }
      ],
      form: {},

      shopTable: [
        {
          checks: "",
          name: "张小二服饰",
          number: "jd_001	",
          shopname: "京东店	",
          type: "线上店铺"
        },
        {
          checks: "",
          name: "张小二服饰",
          number: "tm_001	",
          shopname: "育学园天猫旗舰店（正式）	",
          type: "线上店铺"
        },
        {
          checks: "",
          name: "张小二服饰",
          number: "400001	",
          shopname: "录屏店铺002	",
          type: "线上店铺"
        },
        {
          checks: "",
          name: "张小二服饰",
          number: "161616	",
          shopname: "张小二bbc店铺	",
          type: "线上店铺"
        }
      ],

      shopWarehouse: [
        {
          checks: "",
          number: "1702",
          name: "张小二门店仓	",
          address: "	"
        }
      ],
      //供应商
      supplierTable: [
        {
          checks: "",
          number: "1912240002546516",
          name: "12312312312313123	"
        },
        {
          checks: "",
          number: "1911290006883258",
          name: "对账人民币经销供应商	"
        },
        {
          checks: "",
          number: "1911290006873624",
          name: "对账美元经销供应商	"
        },
        {
          checks: "",
          number: "1911280009438561",
          name: "对账单供应商	"
        },
        {
          checks: "",
          number: "1911080000119790",
          name: "wuxiancai444	"
        }
      ]
      //
    };
  },
  mounted() {
    this.getDetail();
    this.id = this.$route.params.id;
  },
  methods: {
    // 根据合同编码获得对应商品信息
    findPage: function(data) {
      if (this.filter.contractCode == null) {
        this.$message({
          message: "请输入合同编号！",
          type: "warning"
        });
        return;
      }
      let this_ = this;
      // this.$refs.CyTable.findPageStaticState(this.filters);
      this.utils.request.findPurchaseContractProduct(this.filter, function(
        res
      ) {
        this_.proTables = res.data;
        console.log(this_.proTables);
      });
    }, //根据合同生成对应采购单
    addOrder() {
      var this_ = this;
      if (this_.multipleSelectionShop < 1) {
        this_.$message({ message: "请选择一条数据", type: "error" });
        return;
      }
      this_.multipleSelectionShop.forEach((item, index) => {
        let product = {};
        product.productName = item.chineseName;
        product.productBarNo = item.code;
        product.productUnit = item.productUnit;
        product.productCode = item.code;
        this_.tableData.push(product);
      });
      this_.multipleSelectionShop = [];
      this_.choseModel = false;
      this_.choseTable = false;
    },
    change(index, e) {
      let this_ = this;
      if (this_.id == 1) {
        this.tableData.realRecievedNum = e.realRecievedNum;
        if (parseInt(e.realRecievedNum) > e.purchaseNum) {
          this_.$message({
            message: "收货数量不能大于采购数量",
            type: "error"
          });
          return;
        }
        this_.arr = {
          ID: e.id,
          value: e.realRecievedNum,
          purchaseNum: e.purchaseNum
        };
        this_.editarr.push(this_.arr);
      } else {
        this.tableData.realDeliveryNum = e.realDeliveryNum;
        if (parseInt(e.realDeliveryNum) > e.purchaseNum) {
          this_.$message({
            message: "发货数量不能大于采购数量",
            type: "error"
          });
          return;
        }
        this_.arr = {
          ID: e.id,
          value: e.realDeliveryNum,
          purchaseNum: e.purchaseNum
        };
        this_.editsarr.push(this_.arr);
      }
    },
    getDetail() {
      let this_ = this;
      if (
        this.$route.query != null &&
        this.$route.query.id != null &&
        this.$route.query.id != "" &&
        this.$route.query.id != "null" &&
        this.$route.query.id != "undefined"
      ) {
        let params = {};
        params.id = this.$route.query.id;
        this.utils.request.getNoPurchaseOrderDetail(params, function(res) {
          if (res.code === "0000") {
            this_.order=res.data;
            this_.tableData = JSON.parse(res.data.products)
          } else {
            this_.$message({ message: "操作失败, " + data.msg, type: "error" });
          }
        });
        //
      }
    },

    print: function() {
      this.$message({ message: "打印成功", type: "success" });
    },
    //删除
    delOrder() {
      this.$message({ message: "删除成功", type: "success" });
    },
    //下载
    dowOrder() {
      this.$message({ message: "下载成功", type: "success" });
    },
    //导入
    importOrder() {
      this.$message({ message: "导入成功", type: "success" });
    },
    //保存
    save() {
      let this_ = this;
      var msg = this_.id == 1 ? "收货成功" : "发货成功";
      if (this_.editarr.length < 1 && this_.editsarr.length < 1) {
        this_.$message({ message: msg, type: "success" });
        this_.findre();
        this_.$router.go(-1);
        return;
      }
      if (this_.id == 1) {
        this_.utils.request.savePurchaseContractProductRel(
          { arrs: this_.editarr },
          function(res) {
            if (res.code === "0000") {
              this_.$message({ message: msg, type: "success" });
              this_.findPage();
            } else {
              this_.$message({ message: "操作失败", type: "error" });
            }
          }
        );
      } else {
        this_.utils.request.savePurchaseContractProductRel(
          { arr: this_.editsarr },
          function(res) {
            if (res.code === "0000") {
              this_.$message({ message: msg, type: "success" });
            } else {
              this_.$message({ message: "操作失败", type: "error" });
            }
          }
        );
      }
      this_.findre();
      this_.$router.go(-1);
    },
    updataPurchaseOrderStatus(status) {
      let this_ = this;
      var nowdate = new Date();
      if (nowdate.getTime() > new Date(this_.form.endTime).getTime()) {
        status = 6;
      }
      this_.utils.request.savePurchaseOrder(
        { status: status, id: this.$route.query.id },
        function(res) {
          // if (res.code === "0000") {
          //     this_.$message({ message: msg, type: "success" });
          // } else {
          //     this_.$message({message: "操作失败", type: "error"});
          // }
        }
      );
    },
    findre() {
      let this_ = this;
      this_.utils.request.findPurchaseContractProductRelListPage(
        { contractCode: this_.form.contractNo },
        function(res) {
          if (res.code === "0000") {
            let status = 0;
            for (var i = 0; i < res.data.list.length; i++) {
              if (
                res.data.list[i].realRecievedNum <
                  res.data.list[i].purchaseNum ||
                res.data.list[i].realDeliveryNum < res.data.list[i].purchaseNum
              ) {
                status = 0;
                break;
              }
              if (
                res.data.list[i].realRecievedNum ==
                  res.data.list[i].purchaseNum &&
                res.data.list[i].realDeliveryNum == res.data.list[i].purchaseNum
              ) {
                status = 5;
                continue;
              }
            }
            // this_.updataPurchaseOrderStatus(status);
          } else {
            this_.$message({ message: "操作失败", type: "error" });
          }
        }
      );
    },
    //提交
    saves() {
      let this_ = this;
      let flag = true;
      //判断收货数量
      this.tableData.forEach(function(value, i) {
        if (
          !value.realRecievedNum ||
          !value.purchaseNum ||
          !value.realRecievedNum
        ) {
          flag = false;
        }
        if (value.realRecievedNum > value.purchaseNum) {
          flag = false;
        }
      });
      if (!flag) {
        this.$message({
          message: "收货数量或发货数量不能大于采购数量",
          type: "error"
        });
        return;
      }
      let params = this_.order;
      params.products = JSON.stringify(this_.tableData);
      this_.utils.request.saveOrUpdateNoPurchase(params, function(res) {
        if (res.code === "0000") {
          this_.$message({ message: msg, type: "success" });
        } else {
         
        }
      });
      this_.$router.go(-1);
    },
    //选择供应商
    choseSupplier() {
      this.showSupplierModel = true;
      this.showSupplierTable = true;
    },
    //联系人
    showContact() {
      this.showContactModel = true;
      this.showContactTable = true;
    },
    //收货单table
    choseOrder: function() {
      this.queryShopapi();
      this.multipleSelectionShop = [];
      this.choseModel = true;
      this.choseTable = true;
    },
    //店铺table
    showStore() {
      this.showModel = true;
      this.showTable = true;
    },
    //供应商
    showSupplier: function() {
      this.showSupplierModel = true;
      this.showSupplierTable = true;
    },
    //仓库
    showWarehouse() {
      this.showModel1 = true;
      this.showTable1 = true;
    },

    //取消按钮
    cancels: function() {
      this.showModel = false;
      this.showTable = false;
    },
    //取消按钮
    cancels1: function() {
      this.showModel1 = false;
      this.showTable1 = false;
    },
    //取消按钮
    cancelSupplier: function() {
      this.showSupplierModel = false;
      this.showSupplierTable = false;
    },
    //取消按钮
    clearChose: function() {
      this.choseModel = false;
      this.choseTable = false;
    },
    //取消按钮
    clearContact: function() {
      this.showContactModel = false;
      this.showContactTable = false;
    },
    handleSelectionChangeShop(val) {
      this.multipleSelectionShop = val;
      console.log(JSON.stringify(this.multipleSelectionShop));
    },
    //添加供应商信息
    addSupiler() {},
    queryShopapi() {
      let this_ = this;
      if (this_.queryFiteris === undefined || this_.queryFiteris === null) {
        this_.queryFiteris = {};
      }
      // this_.dataForm.pageNum = data === null || data === undefined ? this.pageRequest.pageNum : data;
      this_.queryFiteris.pageSize = this_.pageRequest.pageSize;
      this_.queryFiteris.pageNum = this_.pageRequest.pageNum;
      this_.utils.request.queryShopApi(this_.queryFiteris, function(res) {
        if (res.code === "0000") {
          for (var i = 0; i < res.data.rows.length; i++) {
            if (res.data.rows[i].canSale == 0) {
              res.data.rows[i].canSale = "下架";
            }
            if (res.data.rows[i].canSale == 1) {
              res.data.rows[i].canSale = "上架";
            }
            if (res.data.rows[i].type == 1) {
              res.data.rows[i].type = "常规商品";
            }
            if (res.data.rows[i].type == 2) {
              res.data.rows[i].type = "卡卷";
            }
            if (res.data.rows[i].type == 3) {
              res.data.rows[i].type = "海购";
            }
            if (res.data.rows[i].type == 4) {
              res.data.rows[i].type = "赠品";
            }
          }
          this_.shopFilters.res.rows = res.data.rows;
          this_.shopFilters.res.total = res.data.total;
          console.log(res.data);
          console.log(this_.tableData);
          // this_.totalSize = Number(res.data.total);
          this_.$refs.CyTable.findPageStaticState(this_.shopFilters);
        } else {
          this_.tableData = [];
          this_.totalSize = 0;
        }
      });
    }
  }
};
</script>

<style scoped>
.el-row {
  margin-bottom: 15px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 20px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
